<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style type="text/css">
    .fs20{ font-size: 16px;}
    .p1{display: inline;font-size: 30px;}
    .p2{display: inline; font-size: 16px;}
</style>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>项目统计</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box bg-aqua">
                <span class="info-box-icon"><i class="fa fa-book"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text fs20"><b>总项目统计</b></span>
                    <div style="margin-top: 10px;margin-left:50px;">
                        <p class="p1" th:text="${allProjectCount}"></p>
                        <p class="p2">&nbsp;项</p>
                    </div>
                </div>
            </div>
            <div class="info-box bg-aqua">
                <span class="info-box-icon"><i class="fa fa-book"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text fs20">
                        <a id="project-year-pre" href="#" class="fa fa-arrow-left" style="color: #FFF"></a>&nbsp;
                        <b><span id="project-year" class="year" th:text="${year}"></span>年总项目统计</b>&nbsp;
                        <a id="project-year-next" href="#" style="color: #FFF" class="fa fa-arrow-right"></a>
                    </span>
                    <div style="margin-top: 10px;margin-left:50px;">
                        <p class="p1" id="project-year-all"
                           th:text="${allProjectCountByYear}"></p>
                        <p class="p2">&nbsp;项</p>
                    </div>
                </div>
            </div>
            <div class="info-box bg-aqua">
                <span class="info-box-icon"><i class="fa fa-book"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text fs20"><a id="project-month-pre" href="#" class="fa fa-arrow-left"
                                                   style="color: #FFF"></a>&nbsp;&nbsp;<b><span id="project-month"
                                                                                                class="month"
                                                                                                th:text="${month}"></span>月项目统计</b>&nbsp;&nbsp;<a
                            id="project-month-next" href="#" style="color: #FFF" class="fa fa-arrow-right"></a></span>
                    <div style="margin-top: 10px;margin-left:50px;">
                        <p class="p1"
                           th:text="${allProjectCountByMonth}"></p>
                        <p class="p2">&nbsp;项</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box bg-green">
                <span class="info-box-icon"><i class="fa fa-star"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text fs20"><b>已完成项目统计</b></span>
                    <div style="margin-top: 10px;margin-left:50px;">
                        <p class="p1" th:text="${completeProjectCount}"></p>
                        <p class="p2">&nbsp;项</p>
                    </div>
                </div>
            </div>
            <div class="info-box bg-green">
                <span class="info-box-icon"><i class="fa fa-star"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text fs20"><b><span
                            id="completed-year" class="year" th:text="${year}"></span>年已完成项目统计</b></span>
                    <div style="margin-top: 10px;margin-left:50px;">
                        <p class="p1" id="project-year-completed"
                           th:text="${completedProjectCountByYear}"></p>
                        <p class="p2">&nbsp;项</p>
                    </div>
                </div>
            </div>
            <div class="info-box bg-green">
                <span class="info-box-icon"><i class="fa fa-star"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text fs20"><b><span
                            id="completed-month" class="month" th:text="${month}"></span>月已完成项目统计</b></span>
                    <div style="margin-top: 10px;margin-left:50px;">
                        <p class="p1" id="project-month-completed"
                           th:text="${completedProjectCountByMonth}"></p>
                        <p class="p2">&nbsp;项</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box bg-yellow">
                <span class="info-box-icon"><i class="fa fa-star-half-o "></i></span>
                <div class="info-box-content">
                    <span class="info-box-text fs20"><b>未完成项目统计</b></span>
                    <div style="margin-top: 10px;margin-left:50px;">
                        <span th:text="${incompleteProjectCount}"
                              class="p1"></span>
                        <p class="p2">&nbsp;项</p>
                    </div>
                </div>
            </div>
            <div class="info-box bg-yellow">
                <span class="info-box-icon"><i class="fa fa-star-half-o "></i></span>
                <div class="info-box-content">
                    <span class="info-box-text fs20"><b><span
                            id="notComplete-year" class="year" th:text="${year}"></span>年未完成项目统计</b></span>
                    <div style="margin-top: 10px;margin-left:50px;">
                        <p class="p1" id="project-year-notComplete"
                           th:text="${notCompleteProjectCountByYear}"></p>
                        <p class="p2">&nbsp;项</p>
                    </div>
                </div>
            </div>
            <div class="info-box bg-yellow">
                <span class="info-box-icon"><i class="fa fa-star-half-o "></i></span>
                <div class="info-box-content">
                    <span class="info-box-text fs20"><b><span
                            id="notComplete-month" class="month" th:text="${month}"></span>月未完成项目统计</b></span>
                    <div style="margin-top: 10px;margin-left:50px;">
                        <p class="p1" id="project-month-notComplete"
                           th:text="${notCompleteProjectCountByMonth}"></p>
                        <p class="p2">&nbsp;项</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box bg-light-blue">
                <span class="info-box-icon"><i class="fa fa-minus-circle"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text fs20"><b>未发货项目统计</b></span>
                    <div style="margin-top: 10px;margin-left:50px;">
                        <span th:text="${noSendProjectCount}"
                              class="p1"></span>
                        <p class="p2">&nbsp;项</p>
                    </div>
                </div>
            </div>
            <div class="info-box bg-light-blue">
                <span class="info-box-icon"><i class="fa fa-minus-circle"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text fs20"><b><span
                            id="noSend-year" class="year" th:text="${year}"></span>年未发货项目统计</b></span>
                    <div style="margin-top: 10px;margin-left:50px;">
                        <p class="p1" id="project-year-noSend"
                           th:text="${noSendProjectCountByYear}"></p>
                        <p class="p2">&nbsp;项</p>
                    </div>
                </div>
            </div>
            <div class="info-box bg-light-blue">
                <span class="info-box-icon"><i class="fa fa-minus-circle"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text fs20"><b><span
                            id="noSend-month" class="month" th:text="${month}"></span>月未发货项目统计</b></span>
                    <div style="margin-top: 10px;margin-left:50px;">
                        <p class="p1" id="project-month-noSend"
                           th:text="${noSendProjectCountByMonth}"></p>
                        <p class="p2">&nbsp;项</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8" id="char">
            <div style="margin-top: 30px;">
                <div id="barChart" style="height: 450px;"></div>
            </div>
        </div>

        <div class="col-md-4" id="charPie">
            <div style="margin-top: 30px;">
                <div id="pieChart" style="height: 450px;"></div>
            </div>
        </div>

    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    var context = ctx + "overview/statistical";

    var statistical = {

        updateProjectYear: function (result, year) {
            $("#project-year-all").text(result.data.projectCount);
            $("#project-year-completed").text(result.data.projectCompletedCount);
            $("#project-year-notComplete").text(result.data.projectNotCompleteCount);
            $("#project-year").text(year);
            $("#completed-year").text(year);
            $("#notComplete-year").text(year);
        },
        updateNoSendProjectYear: function (result, year) {
            $("#project-year-noSend").text(result.data.noSendProjectCount);
            $("#noSend-year").text(year);
        },
        updateProjectMonth: function (result, month) {
            $("#project-month-all").text(result.data.projectCount);
            $("#project-month-completed").text(result.data.projectCompletedCount);
            $("#project-month-notComplete").text(result.data.projectNotCompleteCount);
            $("#project-month").text(month);
            $("#completed-month").text(month);
            $("#notComplete-month").text(month);
        },
        updateNoSendProjectMonth: function (result, year) {
            $("#project-month-noSend").text(result.data.noSendProjectCount);
            $("#noSend-month").text(year);
        },
        update: function (year, month) {
            js.get({
                url: context + "/year/projectCount",
                data: {year: year},
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        statistical.updateProjectYear(result, year);
                    }
                }
            });
            js.get({
                url: context + "/year/noSendProjectCount",
                data: {year: year},
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        statistical.updateNoSendProjectYear(result, year);
                    }
                }
            });
            statistical.updateMonth(year, month);
        },
        updateMonth: function (year, month) {
            js.get({
                url: context + "/month/projectCount",
                data: {year: year, month: month},
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        statistical.updateProjectMonth(result, month);
                    }
                }
            });
            js.get({
                url: context + "/month/noSendProjectCount",
                data: {year: year, month: month},
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        statistical.updateNoSendProjectMonth(result, month);
                    }
                }
            });
        }
    };

    $(function () {

        // 项目箭头
        $("#project-year-pre").click(function () {
            var year = parseInt($("#project-year").text());
            if (year > 2016) {
                year -= 1;
                var month = parseInt($("#project-month").text());
                statistical.update(year, month);
            } else {
                js.modal.warning("2015那一年，我在来时的路上");
            }
        });

        $("#project-year-next").click(function () {
            var year = parseInt($("#project-year").text());
            var month = parseInt($("#project-month").text());
            if (year < new Date().getFullYear()) {
                year += 1;
                if (month > new Date().getMonth() + 1 && year === new Date().getFullYear()) {
                    month = new Date().getMonth() + 1;
                }
                statistical.update(year, month);
            } else {
                js.modal.warning((new Date().getFullYear() + 1) + "那一年，我在去时的路上");
            }
        });

        $("#project-month-pre").click(function () {
            var month = parseInt($("#project-month").text());
            var year = parseInt($("#project-year").text());
            if (month === 1) {
                if (year !== 2016) {
                    statistical.update(year - 1, 12);
                } else {
                    js.modal.warning("2015那一年，我在来时的路上");
                }
            } else {
                statistical.updateMonth(year, month - 1);
            }
        });

        $("#project-month-next").click(function () {
            var month = parseInt($("#project-month").text());
            var year = parseInt($("#project-year").text());
            if (month === new Date().getMonth() + 1 && year === new Date().getFullYear()) {
                js.modal.warning("时间都去哪了，转眼一个月就过去了");
                return;
            }
            if (month === 12) {
                if (year !== new Date().getFullYear()) {
                    statistical.update(year + 1, 1);
                } else {
                    js.modal.warning("时间都去哪了，转眼一个月就过去了");
                }
            } else {
                statistical.updateMonth(year, month + 1);
            }
        });
    });

    //----------左侧柱状折线图Begin-----------------
    // 创建 echarts 实例。
    var dom = document.getElementById('barChart');

    //自适应宽高
    var myChartContainer = function () {
        dom.style.width = ($("#char").width()) + 'px';
    };
    myChartContainer();
    var chart = echarts.init(dom);

    option = {
        title: {
            text: '各生产厂未完成量统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            left: 'left',
            data: ['未完成项目', '未完成数量']
        },
        xAxis: [
            {
                type: 'category',
                data: [[${xAxis}]],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '项目',
                min: 0,
                max: [[${maxNoCompleteProject}]],
                interval: 10,
                axisLabel: {
                    formatter: '{value} 项'
                }
            },
            {
                type: 'value',
                name: '数量',
                min: 0,
                max: [[ ${maxNoCompleteNum}]],
                interval: 3000,
                axisLabel: {
                    formatter: '{value} 件'
                }
            }
        ],
        series: [
            {
                name: '未完成项目',
                type: 'bar',
                data: [[${noCompleteProject}]],
                color: "#F39C12",
                barWidth : 50,//柱图宽度
            },
            {
                name: '未完成数量',
                type: 'line',
                yAxisIndex: 1,
                data: [[${noCompleteNum}]],
                color: "#587EA3"
            }
        ]
    };

    // 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。
    chart.setOption(option);
    //----------左侧柱状折线图End-----------------

    //----------右侧饼状折线图Begin-----------------
    // 创建 echarts 实例。
    var domPie = document.getElementById('pieChart');

    //自适应宽高
    var myChartPieContainer = function () {
        domPie.style.width = ($("#charPie").width()) + 'px';
    };
    myChartPieContainer();
    var chartPie = echarts.init(domPie);

    optionPie = {
        title: {
            text: '未完成订单类型统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'right',
            data: ['体系楼', '财务', '备库']
        },
        series: [
            {
                name: '订单类型',
                type: 'pie',
                radius: ['40%', '70%'],
                //radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {value: [[ ${systemBuildingOrderCount}]], name: '体系楼', itemStyle: {color: '#EC4165'}},
                    {value: [[ ${financeOrderCount}]], name: '财务', itemStyle: {color: '#01B1FA'}},
                    {value: [[ ${reserveLibraryOrderCount}]], name: '备库', itemStyle: {color: '#9C1BFF'}},
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。
    chartPie.setOption(optionPie);
    //----------右侧饼状折线图End-----------------
</script>
</body>
</html>
